<template>
  <div class="coupon-container">
    <van-nav-bar title="我的优惠券" left-arrow fixed @click-left="$router.back()" />

    <p class="header">
        <span :class="{activated:n===1}" @click="toggle(1,'isUnused')">未使用</span>
        <span :class="{activated:n===2}" @click="toggle(2,'isUse')">已使用</span>
        <span :class="{activated:n===3}" @click="toggle(3,'isUnused')">已过期</span>
      </p>

    <!-- 空页面 -->
    <div class="empty" v-if="!list.length">
      <img src="@/assets/empty.png">
      <p>亲，暂无相关优惠券</p>
    </div>

    <div class="list" v-else>
        <CouponItem :item="item" v-for="item in list" :key="item.coupon_id" :class="{gray:item.is_use || item.is_expire}"></CouponItem>
    </div>

  </div>
</template>

<script>

import { getMyCouponList } from '@/api/coupon'
import CouponItem from '@/components/CouponItem.vue'

export default {
  data () {
    return {
      list: [],
      n: 1
    }
  },
  components: {
    CouponItem
  },
  async created () {
    const { data: { list } } = await getMyCouponList({ dataType: 'isUnused', page: 1 })
    this.list = list.data
  },
  methods: {
    async toggle (n, dataType) {
      this.n = n
      const { data: { list } } = await getMyCouponList({ dataType, page: 1 })
      this.list = list.data
    }
  }
}
</script>

<style lang="less" scoped>

.coupon-container {
 padding-top: 46px;
}

.van-nav-bar {
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

    ::v-deep .van-icon-arrow-left {
        color: black;
    }
}

.header {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    background-color: white;

    span {
      padding: 5px;
      font-size: 15px;
      color: rgb(48, 49, 51);
    }

    .activated {
      font-weight: bold;
      color: rgb(250, 34, 9);
      border-bottom: 3px solid rgb(250, 34, 9);
    }
  }

.list {
    background-color: white;
}

.gray {
    background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
}

.empty {
  width: 325px;
  height: 197px;
  padding: 90px 25px;
  text-align: center;

  img {
    width: 140px;
    height: 92px;
  }

  p {
    font-size: 14px;
    color: grey;
    margin: 37px 0;
  }
}
</style>
